<template>
	<view class="editfriends">
		<view class="">
			<my-top title="亲信息"  :isline='true'>
				<view class="submittop" v-if='!ismyself'>
					保存
				</view>
			</my-top>
		</view>
		<view class="m_header_top"></view>
		<view class="fcontent">
			<view class="listpage" @click="editfriends(ismyself)">
				<view class="image">
					<image :src="childInfo.logo?childInfo.logo:'../../../../static/img/menu-tx.png'" mode=""></image>
				</view>
				<view class="title">
					<view class="name">
						<text>{{childInfo.name}}</text>
						<text v-if="ismyself">我</text>
					</view>
					<view class="nearly">
						<text>Ta是“日程表所有者”名称的{{childInfo.relationName}}</text>
					</view>
				</view>
				<view v-if="ismyself" >
					<text class="iconfont todaygengduo"></text>
				</view>
			</view>
			
			<view class="content">
				<view class="itembox" @click="changerole(item)"  v-for="(item,index) in myselflist" :key='index'>
					<text class="borders" :class="item.type == templatedata?'checkborders':''"></text>
					<text class="title">{{item.name}}</text>
					<text class="distraction">{{item.distraction}}</text>
				</view>
			</view>
			<view class="quitfriends" v-if="ismyself" @click="changefriends(ismyself)">
				<text>退出亲友团</text>
			</view>
			<view class="quitfriends" v-else @click="changefriends(ismyself)">
				<text>删除成员</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				ismyself:false,
				templatedata:'',
				childId:'',
				myselflist:[],
				childInfo:{},
				rolelist: [
					{
						name: '管理员',
						type: 1,
						check: false,
						distraction: '我是管理员',
					},
					{
						name: '编辑者',
						type: 2,
						check: false,
						distraction: '我是编辑者',
					},
					{
						name: '订阅者',
						type: 3,
						check: false,
						distraction: '我是订阅者',
					}
				]
			}
		},
		async onLoad(e) {
			let vself = false,arr = [];
			this.templatedata = e.status;
			console.log(e.self,e.childId,e.status);
			// 是自己的日程
			if(e.regulateId==1){
				// 是管理员
				if(e.status ==1){
					arr = this.rolelist.filter(item=>item.type == e.status);
				}else{  // 非管理员
					if(e.self=='false'){
						arr = this.rolelist.filter(item=>item.type == e.status);
					}else{
						arr = this.rolelist.splice(1,2);
					}
				}
			}else{  //不是自己的日程
				// 是管理员
				if(e.status ==1){
					arr = this.rolelist.filter(item=>item.type == e.status);
				}else{  // 非管理员
					// if(e.self=='false'){
					// 	arr = this.rolelist.filter(item=>item.type == e.status);
					// }else{
						// arr = this.rolelist.splice(1,2);
						arr = this.rolelist.filter(item=>item.type == e.status);
					// }
				}
			}
			this.childId = e.childId;
			let data = await this.getIdSchedule( e.childId);
			this.childInfo = data;
			console.log('小孩详情',data);
			this.ismyself= e.self=='true' ?true:false;
			this.myselflist =arr;
		},
		methods: {
			...mapActions({
				upaRoleRegulateTb:'initData/upaRoleRegulateTb',
				delRoleRegulateTb:'initData/delRoleRegulateTb',
				getIdSchedule:'initData/getIdSchedule',
			}),
			editfriends(status){
				if(status){
					uni.navigateTo({
						url:'./update?childId='+ this.childId
					})
				}
			},
			
			changefriends(status){
				if(status){
					this.delRoleRegulateTb({
						childId:this.childId
					});
				}else{
					
				}
				uni.showModal({
					title:'是否将ta移出亲友团',
					success() {
						
					}
				})
			},
			changerole(item) {
				this.templatedata = item.type;
				let val = this.upaRoleRegulateTb({
					childId: this.childId,
					regulateId:item.type,
				})
				if(val){
					uni.showToast({
						title:'修改成功',
						success() {
							// setTimeout(()=>{
							// 	uni.navigateBack()
							// },1000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.editfriends{
		.submittop{
			width: 132rpx;
			height: 60rpx;
			border-radius: 30rpx;
			background-color: rgba(4, 161, 251, 1);
			text-align: center;
			line-height: 60rpx;
			color: #FFFFFF;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.fcontent{
			display: flex;
			flex-direction: column;
			align-items: center;
			.quitfriends{
				margin-top: 70rpx;
				width: 720rpx;
				color: rgba(255, 109, 86, 1);
				font-size: 28rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius:8rpx;
				border: 1rpx solid rgba(0,0,0,.2);
			}
			.content {
				margin-top: 20rpx;
				width: 720rpx;
				// height: 262rpx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 10rpx;
				padding: 0 16rpx;
				box-sizing: border-box;
				
				.itembox {
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					border-bottom: 1rpx solid rgba(0, 0, 0, .2);
			
					.borders {
						width: 19rpx;
						height: 19rpx;
						border: 2rpx solid #5555ff;
						border-radius: 50%;
						opacity: 1;
						margin-right: 16rpx;
					}
			
					.checkborders {
						border: 2rpx solid #5555ff;
						background-color: #5555ff;
					}
			
					.title {
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 42rpx;
						color: #626262;
						opacity: 1;

						margin-right: 16rpx;
					}
			
					.distraction {
						height: 28rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height:38rpx;
						color: #707070;
						opacity: 1;

			
					}
				}
			
				.itembox:last-child {
					border-bottom: none
				}
			
			}
			.listpage {
				background-color: #FFFFFF;
				display: flex;
				width: 100%;
				padding: 32rpx;
				align-items: center;
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);
				.title {
					flex: 2;
					display: flex;
					flex-direction: column;
			
					.name {
						text:first-child {
							height: 42rpx;
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							line-height: 42rpx;
							color: #333333;
							opacity: 1;

			
						}
			
						text:last-child {
							margin-left: 16rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							opacity: 1;
							width: 54rpx;
							padding:0 3rpx;
							height: 33rpx;
							border: 1rpx solid rgba(0,0,0,.2);
							border-radius: 10rpx;
						}
					}
					.nearly {
						margin-top:10rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						opacity: 1;

					}
				}
				.image {
					width: 94rpx;
					height: 94rpx;
					margin-right: 8rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
